<template>
	<view class="hot-search">
		<!-- 自定义导航栏 -->
		<u-navbar 
			:is-back="true" 
			:is-fixed="true"
			back-icon-size="40"
			:border-bottom="false"
		>
			<view class="slot-wrap">
				<u-icon name="search" color="#333333" size="30"></u-icon>
				<input type="text" placeholder="请输入搜索内容" placeholder-class="tip-hodler"/>
			</view>
		</u-navbar>
		
		<!-- 图片 -->
		<view class="u-f u-f-ajc">
			<image src="/static/search/hot-search.png" mode="widthFix" class="main-imgs"></image>
		</view>
		
		<!-- 热搜 list列表 -->
		<view class="hot-list">
			<view class="u-f u-f-sbc hot-item" v-for="item in hotSearchList" :key="item.id">
				<view class="u-f u-f-ac hot-i-left">
					<text class="left-text">{{item.id }}</text>
					<text class="ellipsis">{{item.title}}</text>
				</view>
				<view class="u-f u-f-ac hot-i-right">
					<image src="/static/search/hot.png"></image>
					<text>{{ item.comment }}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSearchList: [
					{id:'01',title:'武当金顶最美风景',comment:996816,showHotIcon:true},
					{id:'02',title:'武当鼎聚潮流音乐节HI秀',comment:6816,showHotIcon:true},
					{id:'03',title:'网红武当名宿',comment:9916,showHotIcon:true},
					{id:'04',title:'武当金顶最美风景',comment:9126,showHotIcon:true},
					{id:'05',title:'武当鼎聚潮流音乐节HI秀',comment:9226,showHotIcon:true},
					{id:'06',title:'网红武当名宿',comment:3456,showHotIcon:true},
					{id:'07',title:'武当鼎聚潮流音乐节HI秀',comment:1314,showHotIcon:true},
					{id:'08',title:'武当金顶最美风景',comment:5220,showHotIcon:true},
					{id:'09',title:'网红武当名宿',comment:131452,showHotIcon:true},
					{id:'10',title:'武当金顶最美风景',comment:131452,showHotIcon:true},
				]
			}
		}
	}
</script>

<style lang="scss">
.hot-search{
	.slot-wrap{
		display: flex;
		align-items: center;
		flex: 1;
		margin-left: 30upx;
		margin-right: 30upx;
		position: relative;
		/deep/ .uicon-search{
			position: absolute;
			left: 20upx;
		}
		.tip-hodler{
			font-size: 26upx;
			color: #999999;
		}
		input{
			width: 100%;
			padding-left: 70upx;
			border-radius: 35upx;
			background-color: #F6F6F6;
			height: 70upx;
			line-height: 70upx;
		}
	}
	.main-imgs{
		width:100%;
		border-radius: 8upx;
		margin: 30upx 28upx;
		box-sizing: border-box;
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,.5);
	}
	.hot-list{
		border-radius: 8upx;
		margin: 16upx 28upx;
		box-sizing: border-box;
		.hot-item{
			margin: 30upx 0;
			.hot-i-left{
				width: 75%;
				position: relative;
				text:first-of-type{
					font-size: 42upx;
					font-weight: bold;
					color: #333333;
					font-style: italic;
					margin-right: 24upx;
				}
				text:last-of-type{
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
					width: 90%;
				}
				.left-text:after{
					content: '';
					width: 20upx;
					height: 20upx;
					border-radius: 100%;
					background: linear-gradient(to bottom right,#9B9CA0,#D5D6D8);
					position: absolute;
					bottom: 2px;
					left: 32upx;
					z-index: -1;
				}
			}
			.hot-i-right{
				width: 25%;
				text-align: right;
				image{
					width: 35upx;
					height: 35upx;
					margin-right: 14upx;
				}
				text{
					font-size: 28upx;
					color: #F40D0D;
					font-weight: bold;
				}
			}
		}
		
		.hot-item:first-of-type{
			margin: 30upx 0;
			.hot-i-left{
				width: 75%;
				position: relative;
				text:first-of-type{
					font-size: 42upx;
					font-weight: bold;
					color: #F40D0D;
					font-style: italic;
					margin-right: 24upx;
				}
				text:last-of-type{
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
					width: 90%;
				}
				.left-text:after{
					content: '';
					width: 20upx;
					height: 20upx;
					border-radius: 100%;
					background: linear-gradient(to bottom right,#F08285,#EDCCC4);
					position: absolute;
					bottom: 2px;
					left: 34upx;
					z-index: -1;
				}
			}
			.hot-i-right{
				width: 25%;
				text-align: right;
				image{
					width: 35upx;
					height: 35upx;
					margin-right: 14upx;
				}
				text{
					font-size: 28upx;
					color: #F40D0D;
					font-weight: bold;
				}
			}
		}
	
		.hot-item:nth-of-type(2){
			margin: 30upx 0;
			.hot-i-left{
				width: 75%;
				position: relative;
				text:first-of-type{
					font-size: 42upx;
					font-weight: bold;
					color: #FFAD2D;
					font-style: italic;
					margin-right: 24upx;
				}
				text:last-of-type{
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
					width: 90%;
				}
				.left-text:after{
					content: '';
					width: 20upx;
					height: 20upx;
					border-radius: 100%;
					background: linear-gradient(to bottom right,#F9C677,#FDE2B7);
					position: absolute;
					bottom: 2px;
					left: 34upx;
					z-index: -1;
				}
			}
			.hot-i-right{
				width: 25%;
				text-align: right;
				image{
					width: 35upx;
					height: 35upx;
					margin-right: 14upx;
				}
				text{
					font-size: 28upx;
					color: #F40D0D;
					font-weight: bold;
				}
			}
		}
		
		.hot-item:nth-of-type(3){
			margin: 30upx 0;
			.hot-i-left{
				width: 75%;
				position: relative;
				text:first-of-type{
					font-size: 42upx;
					font-weight: bold;
					color: #19BFA0;
					font-style: italic;
					margin-right: 24upx;
				}
				text:last-of-type{
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
					width: 90%;
				}
				.left-text:after{
					content: '';
					width: 20upx;
					height: 20upx;
					border-radius: 100%;
					background: linear-gradient(to bottom right,#72D6C7,#BAEDE8);
					position: absolute;
					bottom: 2px;
					left: 36upx;
					z-index: -1;
				}
			}
			.hot-i-right{
				width: 25%;
				text-align: right;
				image{
					width: 35upx;
					height: 35upx;
					margin-right: 14upx;
				}
				text{
					font-size: 28upx;
					color: #F40D0D;
					font-weight: bold;
				}
			}
		}
		
	}
}
</style>
